import React, { useState } from 'react';
import { Button, Checkbox, Input, message, Modal, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import styles from './index.less';

import request from '@/utils/request';
import { connect } from 'umi';
import { ConnectState } from '@/models/connect';

const { TextArea } = Input;
const Doubt: React.FC<Question.Doubt> = (props) => {
  const { source, afterSubmit, currentUser } = props;
  const [modalVisible, setModalVisible] = useState<boolean>(false);
  const [doubtTypeList, setDoubtTypeList] = useState<[]>([]);
  const [otherReason, setOtherReason] = useState<string>('');
  const [inputError, setInputError] = useState<boolean>(false);

  const doubtList = [
    { content: '分科不准确（请在“其他原因”处填写正确的科室）', type: 0 },
    { content: '问题含有广告', type: 5 },
    { content: '意图不明、表述不清', type: 6 },
    { content: '含有违法违禁信息', type: 8 },
    { content: '非人类、非医疗、非健康相关', type: 1 },
    { content: '有医学/伦理争议', type: 7 },
    { content: '问题涉及推荐、排名、宣传', type: 9 },
    { content: '偏方、妙招类问题', type: 4 },
    { content: '问题含有图解、视频、表格、案例等', type: 2 },
    { content: '涉及价格、明星名人、性别鉴定', type: 3 },
    { content: '涉及死亡时间及死亡率', type: 11 },
    { content: '涉黄', type: 10 },
  ];

  const checkDoubtData = () => {
    let state = true;
    if (doubtTypeList.length <= 0 && !otherReason) {
      message.info('请选择反馈的问题类型或填写其他原因');
    } else if (inputError) {
      message.info('输入框提交最大字数不能超过30字');
    } else if (doubtTypeList.find((item) => item === 0) === 0 && !otherReason) {
      message.info('请在“其他原因”处填写您认为正确的科室');
    } else {
      state = false;
    }

    return state;
  };

  const submitHandle = async function () {
    if (checkDoubtData()) return;

    const { code } = await request('/service/partTimerWb/user/feedBack', {
      method: 'POST',
      data: {
        tid: source.tid,
        pid: currentUser.pid,
        type: doubtTypeList,
        otherReason,
        feedBackType: 1,
      },
    });

    if (code === 0) {
      message.success('您的问题反馈已提交成功');
    } else if (code === 5) {
      message.error('今日反馈数已达上限！');
    } else if (code === 6) {
      message.error('题目已作废');
    } else {
      message.error('提交出现异常，请检查网络状况良好后重试');
    }
    setModalVisible(false);
    afterSubmit();
  };

  return (
    <>
      <span
        className={styles['detail-doubt']}
        onClick={() => {
          setOtherReason('');
          setDoubtTypeList([]);
          setModalVisible(true);
        }}
      >
        <span className={styles['detail-doubt-text']}>对此题有疑问</span>
        <Tooltip
          placement="top"
          title="若您认为此题存在问题，可点击该按钮选择问题类型或其他原因，并提交反馈"
        >
          <QuestionCircleOutlined />
        </Tooltip>
      </span>
      <Modal
        title="问题反馈"
        visible={modalVisible}
        onCancel={() => {
          setModalVisible(false);
        }}
        width={1000}
        footer={[
          <Button
            onClick={() => {
              setModalVisible(false);
            }}
          >
            取消
          </Button>,
          <Button
            onClick={() => {
              submitHandle();
            }}
          >
            提交
          </Button>,
        ]}
      >
        <div>
          <div className={styles['doubt-title']}>请选择问题类型</div>
          <Checkbox.Group
            value={doubtTypeList}
            onChange={(ev) => {
              setDoubtTypeList(ev);
            }}
          >
            {doubtList.map((item, index) => {
              return (
                <span className={styles['doubt-label']} key={index}>
                  <Checkbox value={item.type}>{item.content}</Checkbox>
                </span>
              );
            })}
          </Checkbox.Group>
          <div>
            <div className={styles['doubt-title']}>其他原因：</div>
            <div>
              <TextArea
                className={inputError ? styles['doubt-input-error'] : ''}
                placeholder="若有其他原因，可在此输入,输入框内的最大字数不超过30字，若是超过则字数变红，提交会显示错误提示"
                value={otherReason}
                onChange={(ev) => {
                  if (ev.target.value.length > 30) {
                    setInputError(true);
                  } else {
                    setInputError(false);
                  }
                  setOtherReason(ev.target.value);
                }}
              />
            </div>
          </div>
        </div>
      </Modal>
    </>
  );
};

export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser,
}))(Doubt);
